<script setup>

import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {ref} from "vue";
import {order_list} from "../../request/api";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {timestampToDate} from "@/utils";
import Empty from "@/components/empty/empty.vue";

const menuList = [
  {
    value: 1,
    name: '全部'
  },
  {
    value: 2,
    name: '下单'
  },
  {
    value: 3,
    name: '生产中'
  },
  {
    value: 4,
    name: '生成完毕'
  },
  {
    value: 5,
    name: '发货完毕'
  },
  {
    value: 6,
    name: '结账完毕'
  }
];
const orderList = ref([]);//订单列表
const menuIndex = ref(0);//菜单索引
onShow(()=>{
  getOrder();
})
let data = {
  '2-1':['生产中','下单'],
  '2-2':['生产中','下单'],
}
//获取订单列表
const getOrder = () => {
  order_list({
    type:!menuIndex.value?'':menuList[menuIndex.value].name
  }).then(res=>{
    orderList.value = res.data;
  })
}
//页面跳转
const navigateTo = (url) => {
  uni.navigateTo({
    url
  })
}
/**
 * id: 1
 * number: "2-1"
 * sc_id: 0
 * sc_name: null
 * status: "下单"
 * zg_id: 7
 * zg_name: "李四"
 */
</script>
<template>
  <view class="order-page">
    <u-navbar placeholder title="我的订单" left-icon=""></u-navbar>
    <view class="menu-list">
      <view @click="()=>{
        menuIndex = index;
        getOrder();
      }" :class="{
        active:menuIndex===index
      }" class="item" v-for="(item,index) of menuList" :key="index">
        <text>{{ item.name }}</text>
      </view>
    </view>
    <scroll-view class="scroll-y" scroll-y>
      <empty v-if="!orderList.length"></empty>
      <view v-else class="content">
        <view @click="navigateTo(`/pages/order-detail/order-detail?id=${item.id}`)" class="order-item" v-for="(item,index) of orderList" :key="index">
          <view class="order-code">
            <text>个人代码：{{item.number}}</text>
            <text v-if="item.status==='下单'" style="color: #3563FF;">{{item.status}}</text>
            <text v-if="item.status==='生产中'" style="color: #FF0000;">{{item.status}}</text>
            <text v-if="item.status==='生产完毕'" style="color: #F27503;">{{item.status}}</text>
            <text v-if="item.status==='发货完毕'" style="color: #00B050;">{{item.status}}</text>
            <text v-if="item.status==='结账完毕'" style="color: #0D0D0D;">{{item.status}}</text>
          </view>
          <view class="time">下单时间：{{timestampToDate(item.createtime,true)}}</view>
          <view class="admin">
            <text>指定管理员：{{item.zg_name}}</text>
            <text v-if="item.sc_name">指定生产人员：{{item.sc_name}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>


<style scoped lang="scss">
.order-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .content{
    padding: 30rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:17rpx;
    .order-item{
      width: 100%;
      height: 251rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      padding: 40rpx 30rpx;
      .admin{
        margin-top: auto;
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
      }
      .time{
        font-weight: 400;
        font-size: 26rpx;
        margin-top: 20rpx;
        color: #999999;
      }
      .order-code{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text:last-child{
          font-weight: 500;
          font-size: 30rpx;
          color: #3563FF;
        }
        text:first-child{
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
      }
    }
  }
  .menu-list {
    height: 76rpx;
    display: flex;
    background-color: #fff;
    gap: 40rpx;
    padding: 0 30rpx;
    justify-content: space-between;

    .item {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      &.active{
        position: relative;
        &:after{
          content: "";
          position: absolute;
          width: 57rpx;
          height: 6rpx;
          background: #3563FF;
          border-radius: 3rpx;
          bottom: 0;
        }
        text{
          font-weight: 500;
          font-size: 28rpx;
          color: #3563FF;
        }
      }

      text {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}
</style>
